<template>
    <fieldset>
        <legend>App</legend>
        <div class="container">
            <div class="heading">
                <img src="https://img1.baidu.com/it/u=1810470060,187029262&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" height="80" alt="">
                <div class="title">To-Do List</div>
            </div>
            <div class="from">
        <input type="text" v-model="inp" @keydown.enter="addTodo">
        <button @click="addTodo">提交</button>
            </div>
        <ul>
            <li v-for="(item,index) in list" :key="item" :class="{completed:item.completed}">
                <input type="checkbox" v-model="item.completed" :value="item">
                <b>{{item.text}}</b>
            <button @click="del(index)">X</button>
        </li>
        </ul>
        <div class="foot">
            <button>全部</button>
            <span>{{list.length}}条事项</span>
            <button>已完成：{{alreadyCount}}</button>
            <button>未完成：{{undone}}</button>
        </div>
    </div>
    </fieldset>
</template>
<script setup>
import {ref,onUpdated,watchEffect,computed} from "vue"
import * as utils from "../utils/utilLocalStorage"

    let list=ref(utils.localGet('list')||[
        {
            text: "写代码",
            completed:false
        },
        {
            text:"一二",
            completed:false
        }
    ])

    let inp=ref("")
    let addTodo=()=>{
        let text=inp.value
        if(!!text){
        list.value.unshift({
            text,
            completed:false
        })
        inp=""
        }
        
    }

    onUpdated(()=>{
        console.log(list.value.length-alreadyCount.value);
    })

    let del=(index)=>{
        list.value.splice(index,1)
    }

let alreadyCount=computed({
    get(){
    return list.value.filter(item => item.completed).length
    }
})

let undone=computed({
    get(){
    return list.value.length-alreadyCount.value
    }
})

    watchEffect(() => {
        utils.localSet('list',list.value)
    },{
    flush:'post'
})

    



</script>
<style scoped>
.container{
    background: #f2f2f2;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: 100%;
    padding: 30px 40px 20px;
    text-align: center;
    width: 440px;
}
.heading{
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
}
.title{
    text-align: center;
    background: #ed0e7a5e;
    border-radius: 20% 5% 20% 5%/5% 20% 25% 20%;
    color: #fff;
    font-size: 21px;
    padding: .25em .8em .15em;
    transform: rotate(3deg);
    user-select: none;
}
.from{
    text-align: center;
    margin-top: 25px;
}
.from input{
    background: transparent;
    border: 0;
    border-bottom: 3px dashed #00bfff;
    font-size: 18px;
    outline: 0;
    padding: 5px 0 3px;
}
.from button{
    background-color: initial;
    border-radius: 6px;
    cursor: pointer;
}
ul{
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
    margin:40px 0 0 80px;
}
li{
    list-style: none;
    border-radius: 5px;
    cursor: pointer;
    height: 30px;
    margin: 10px 0;
    padding: 8px 10px 8px 8px;
    align-items: center;
    display: flex;
}
.completed{
    background-color: #ff1493;
    color: #fff;
    text-decoration: line-through;
}
li input{
    margin-right: 10px;
}
li b{
    flex: 1;
}
li button{
    border: 0;
    cursor: pointer;
    font-size: 20px;
    line-height: 10px;
    background-color: transparent;
    text-align: right;
}
.foot{
    text-align: center;
}
.foot button{
    background: transparent;
    border: 1px double #00bfff;
    color: #666;
    cursor: pointer;
    font-size: 16px;
    font-weight: bolder;
    margin: 10px;
    outline: 0;
}
.foot button:hover{
    background-color: orangered;
    color: #f2f2f2;
}

</style>